import { Form, Input } from 'antd'
import { useRef } from 'react';
interface PropsType {
    attrList: ParamsType[];
    getAttrs:(res:any)=>void
}

function GoodsAttr(props: PropsType) {
    let formRef:{current:any} = useRef();
    let { attrList } = props;
    return (
        <div>
            <Form
                name="basic"
                labelCol={{ span: 4 }}
                style={{ width: '100%' }}
                autoComplete="off"
                layout="vertical"
                ref={formRef}
            >
                {
                    attrList.map((item: ParamsType, index: number) => {
                        return (
                            <Form.Item
                                label={item.attr_name}
                                name={item.attr_id}
                                key={index}
                                initialValue={item.attr_vals}
                            >
                                <Input onChange={()=>{
                                    // 获取form表单所有值
                                    console.log(formRef.current.getFieldsValue(true))
                                    props.getAttrs(formRef.current.getFieldsValue(true))
                                }}/>
                            </Form.Item>
                        )
                    })
                }
            </Form>
        </div>
    )
}

export default GoodsAttr;